<template>
	<a-spin :spinning="isLoading">
		<div class="folder_list" v-if="list.length>0">
			<div @click="chooseFolder(item, index)" class="folder_item" v-for="(item, index) in list" :key="index">
				<div class="count" v-if="item.statck_multimedias_count || item.statck_texts_count">{{item.statck_multimedias_count || item.statck_texts_count}}</div>
				<div class="folder_icon">
					<cu-icon
						class="icon"
						type="icon-wenjianjia1"
						style="font-size: 47px; cursor: pointer"
					/>
					<cu-icon
						class="icon icon-postion"
						type="icon-tupian1"
						v-if="item.folder_type == 'image'"
					/>
					<cu-icon
						class="icon icon-postion"
						type="icon-yuyin"
						v-if="item.folder_type == 'audio'"
					/>
					
					<cu-icon
						class="icon icon-postion"
						type="icon-zhinengwenan"
						v-if="item.folder_type == 'text'"
					/>
					<cu-icon
						class="icon icon-postion"
						type="icon-shipin"
						v-if="item.folder_type == 'video'"
					/>
				</div>
				<div class="folder_name">{{item.folder_name}}</div>
			</div>
		</div>
		<div class="no_data" v-if="list.length == 0">
			暂无数据
		</div>
	</a-spin>
</template>

<script>
	import {
		defineComponent,
		reactive,
		toRefs,
		computed,
		watch,
		toRaw,
		createVNode,
		ref,
		nextTick,
	} from "vue";
	import {
		FolderOutlined
	} from "@ant-design/icons-vue";
	
	export default defineComponent({
		props: {
			list: {
				type: Array,
				default: () => {
					return []
				}
			},
			isLoading: {
				type: Boolean,
				default: false
			}
		},
		components: {
		},
		setup(props, context) {
			const state = reactive({
			});
			
			const chooseFolder = (item, index) => {
				context.emit('choose', item)
			}
			
			return{
				...toRefs(state),
				chooseFolder
			}
		},
	});
</script>

<style lang="less" scoped>
	.no_data{
		color: 14px;
		width: 100%;
		height: 300px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
	}
	.folder_list{
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		align-content: flex-start;
		width: 100%;
		min-height: 300px;
		.folder_item{
			cursor: pointer;
			flex-shrink: 0;
			width: 33.3%;
			color: #fff;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin-top: 20px;
			position: relative;
			.count{
				position: absolute;
				height: 18px;
				min-width: 18px;
				border-radius: 50px;
				border: 1px solid #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				background-color: #d03050;
				padding: 0 5px;
				right: 20px;
				top: -2px;
				font-size: 12px;
				text-align: center;
				line-height: 18px;
				padding: 0 2px;
				z-index: 1;
			}
			.folder_icon{
				font-size: 25px;
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				.icon-postion{
					position: absolute;
					font-size: 24px;
					margin-top: 5px;
				}
			}
			.folder_name{
				font-size: 12px;
			}
		}
	}
</style>